<!-- src/components/ContentArea.vue -->
<template>
  <el-main style="padding: 20px;">
    <h2>推荐</h2>
    <el-card v-for="article in articles" :key="article.id" class="article-card">
      <h3>{{ article.title }}</h3>
      <p>{{ article.content }}</p>
      <div>
        <el-tag v-for="tag in article.tags" :key="tag">{{ tag }}</el-tag>
      </div>
    </el-card>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
          id: 1,
          title: 'MarsCode 编程助手模型升级至豆包大模型1.5，同时支持切换满血版...',
          content: 'MarsCode AI对话模型全新升级，现正式接入DeepSeek，MarsCode 编程助手模型支持切换...',
          tags: ['后端', '人工智能', '豆包Mars'],
        },
        {
          id: 2,
          title: '程序员的出路',
          content: '最近几天渐渐悟出来一个道理，做技术没有出路。我在想如果哪天我失业了，没有公司要我，以我现在的经验和能力...',
          tags: ['后端', '产品', '运营'],
        },
        // 更多文章...
      ],
    };
  },
};
</script>

<style scoped>
.article-card {
  margin-bottom: 20px;
}
</style>